<template>
    <el-dialog :title="dialogStatus | titleFilter" :close-on-click-modal="false" width="800px" :visible.sync="visible">
        <el-form ref="temp" :model="temp" :rules="rule" label-width="120px" @keyup.enter.native="dataFormSubmit()">

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">

                    <el-form-item label="园区名称" prop="parkId">
                        <el-select v-model="temp.parkId" placeholder="请选择" @change="park_change">
                            <el-option v-for="item in park_options" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="客户姓名" v-if="temp.type == 1" prop="customerName">
                        <el-input v-model="temp.customerName" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="公司名称" v-if="temp.type == 2" prop="customerName">
                        <el-input v-model="temp.customerName" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item v-if="temp.type == '1'" label="身份证号" prop="idcard">
                        <el-input v-model="temp.idcard" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item v-if="temp.type == '2'" label="纳税人识别号" prop="taxNumber">
                        <el-input v-model="temp.taxNumber" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item v-if="temp.type == '2'" label="发票抬头" prop="invoiceTitle">
                        <el-input v-model="temp.invoiceTitle" placeholder="请输入" />
                    </el-form-item>

                </el-col>
                <el-col :span="12" :offset="0">

                    <el-form-item label="类型">
                        <el-radio-group v-model="temp.type">
                            <el-radio v-for="(item,index) in customer_type" :label="index">{{item}}
                            </el-radio>
                            <!-- <el-radio label="公司" value="2"></el-radio> -->
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="法人姓名" v-if="temp.type == 2" prop="customerName">
                        <el-input v-model="temp.legalPerson" placeholder="请输入" />
                    </el-form-item>

                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="temp.mobile" placeholder="请输入" />
                    </el-form-item>

                </el-col>
            </el-row>

            <!-- <el-form-item label="企业营业执照副本" prop="address">
                <el-input v-model="temp.address" placeholder="请输入" />
            </el-form-item> -->

            <el-row :gutter="20">
                <el-col :span="12" :offset="0">

                    <el-form-item label="身份证正面照1" v-if="temp.type == '1'">
                        <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess"
                            :on-error="imgErr" :data="img_param" :headers="img_param" :before-upload="beforeAvatarUpload"
                            accept=".png, .jpg, .jpeg">
                            <img v-if="temp.idcardPicFront" :src="temp.idcardPicFront" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="企业营业执照副本" v-if="temp.type == '2'">
                        <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess1"
                            :on-error="imgErr" :data="img_param" :headers="img_param" :before-upload="beforeAvatarUpload"
                            accept=".png, .jpg, .jpeg">
                            <img v-if="temp.businessLicense" :src="temp.businessLicense" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                </el-col>
                <el-col :span="12" :offset="0">

                    <el-form-item label="身份证被面照" v-if="temp.type == '1'">
                        <el-upload class="avatar-uploader" :action="action" :show-file-list="false" :on-success="handleAvatarSuccess2"
                            :on-error="imgErr" :data="img_param" :headers="img_param" :before-upload="beforeAvatarUpload"
                            accept=".png, .jpg, .jpeg">
                            <img v-if="temp.idcardPicBack" :src="temp.idcardPicBack" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                </el-col>
            </el-row>

            <!-- <el-form-item label="备注" prop="remark">
                <el-input v-model="temp.remark" placeholder="备注" />
            </el-form-item> -->

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">
                取消
            </el-button>
            <el-button type="primary" @click="dataFormSubmit">
                确认
            </el-button>
        </span>
    </el-dialog>
</template>
<script>
import { createCustomer, getParkDetails, updateCustomer, getParkListAll } from '@/api/assets'// 请求数据
import { getToken } from '@/utils/auth'
import { customerType } from '@/utils/enum'
import { validatPhone } from '@/utils/validate'
export default {
    filters: {
        // 过滤弹框的标题
        titleFilter (type) {
            const textMap = {
                create: '新增',
                update: '修改'
            }
            return textMap[type]
        }
    },
    data () {
        var validatPhone_ = (rule, value, callback) => {
            let vilidat = validatPhone(value)
            if (!vilidat) {
                callback(new Error('请检查手机号是否正确'));
            }
            callback();
        }
        return {
            visible: false,
            dialogStatus: '', // 弹框新增或者修改
            temp: { // 表单数据
                id: '',
                parkName: '',//园区名称
                parkId: '',//园区id
                customerName: '',//客户名称/公司名称
                idcard: '',//身份证号
                taxNumber: '',//纳税人识别号
                type: "1",//类型
                legalPerson: '',//法人姓名
                mobile: '',//手机号
                invoiceTitle: '',//发票抬头
                idcardPicFront: '',//身份证正面
                idcardPicBack: '',//身份证反面
                businessLicense: '',//营业执照

                // remark: ''
            },
            rule: {
                parkId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                customerName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                mobile: [
                    { required: true, message: '不能为空', trigger: 'blur' },
                    { validator: validatPhone_, trigger: 'blur' }
                ],
            },
            park_options: [],
            customer_type: customerType,
            action: `${process.env.VUE_APP_BASE_API}/admin/sys/oss/manage/upload `,
            img_ip: `${process.env.VUE_APP_BASE_API}/`,
        }
    },
    computed: {
        img_param () {
            let token = getToken();
            return { token }
        }
    },
    created () {
    },
    methods: {
        // 初始化
        init (status, param) {
            this.getPark()
            this.dialogStatus = status // 标题
            this.visible = true // 显示
            this[status](param) // 新增或者修改
            this.$nextTick(() => { // 重置表单
                this.$refs['temp'].clearValidate()
            })
        },
        create () {
            this.resetTemp() // 清空表单
        },
        async update (param) {
            console.log(param)
            let data = Object.assign({}, param)//从上一页带过来当前的数据
            // const { data, code } = await getParkDetails({}, param.id) // 从后台获取当前的的数据
            // 成功
            this.temp.id = data.id
            this.temp.parkId = data.parkId
            this.temp.parkName = data.parkName
            this.temp.customerName = data.customerName
            this.temp.idcard = data.idcard
            this.temp.taxNumber = data.taxNumber
            this.temp.legalPerson = data.legalPerson
            this.temp.type = data.type.toString()
            this.temp.mobile = data.mobile
            this.temp.invoiceTitle = data.invoiceTitle
            this.temp.idcardPicFront = data.idcardPicFront
            this.temp.idcardPicBack = data.idcardPicBack
            this.temp.businessLicense = data.businessLicensePic
        },
        // 新增数据清空表单数据
        resetTemp () {
            this.temp = {
                id: '',
                parkName: '',//园区名称
                parkId: '',//园区id
                customerName: '',//客户名称/公司名称
                idcard: '',//身份证号
                taxNumber: '',//纳税人识别号
                type: "1",//类型
                mobile: '',//手机号
                invoiceTitle: '',//发票抬头
                idcardPicFront: '',//身份证正面
                idcardPicBack: '',//身份证反面
                businessLicense: '',//营业执照
            }
        },
        async getPark () {
            const res = await getParkListAll().catch(e => { })
            // 失败
            if (!res) { this.listLoading = false; return }
            // 成功
            const { data, code, message } = res
            this.park_options = data
            console.log(data)

            // this.park_options = this.set_tree(options)
        },
        // 表单提交
        dataFormSubmit () {
            this.$refs['temp'].validate(async (valid) => {
                if (!valid) return
                const params = {
                    'id': this.temp.id || undefined,
                    'parkId': this.temp.parkId,
                    'parkName': this.temp.parkName,
                    'type': this.temp.type,
                    'customerName': this.temp.customerName,
                    'mobile': this.temp.mobile,
                    'idcard': this.temp.idcard,
                    'legalPerson': this.temp.legalPerson,
                    'taxNumber': this.temp.taxNumber,
                    'invoiceTitle': this.temp.invoiceTitle,
                    'businessLicensePic': this.temp.businessLicense,
                    'idcardPicFront': this.temp.idcardPicFront,
                    'idcardPicBack': this.temp.idcardPicBack
                }
                const textMap = {
                    create: createCustomer, // 新增
                    update: updateCustomer // 修改
                }

                // 提交表单
                const { code, message } = await textMap[this.dialogStatus](params)

                // 成功
                this.$message({
                    message: '操作成功',
                    type: 'success',
                    duration: 1500,
                    onClose: () => {
                        this.visible = false
                        this.$emit('getList')
                    }
                })
            })
        },

        // ===>>>>>>>>>

        park_change (e) {
            console.log(e)
            let resArr = this.park_options.filter(item => {
                return item.id == e
            })
            this.temp.parkName = resArr[0].name
        },
        handleAvatarSuccess (res, file) {
            // this.temp.imgUrl = res.data
            if (res && res.code === 200) {
                // this.temp.idcardPicFront = URL.createObjectURL(file.raw);
                this.temp.idcardPicFront = res.data.location
                this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                    }
                });
            } else {
                this.$message.error(res.message);
            }
        },
        handleAvatarSuccess1 (res, file) {
            // this.temp.imgUrl = res.data
            if (res && res.code === 200) {
                // this.temp.businessLicense = URL.createObjectURL(file.raw);
                this.temp.businessLicense = res.data.location
                this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                    }
                });
            } else {
                this.$message.error(res.message);
            }
        },
        handleAvatarSuccess2 (res, file) {
            // this.temp.imgUrl = res.data
            if (res && res.code === 200) {
                // this.temp.idcardPicBack = URL.createObjectURL(file.raw);
                this.temp.idcardPicBack = res.data.location
                this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                    }
                });
            } else {
                this.$message.error(res.message);
            }
        },
        //失败
        imgErr (e) {
            console.log(e)
            this.$message({
                message: "上传失败",
                type: "error",
                duration: 1000,
                onClose: () => {
                }
            });
        },
        beforeAvatarUpload (file) {

            // 设置上传的参数
            // this.img_param = {
            //     token: getToken()
            // }

            // const isJPG = file.type === 'image/jpeg';
            // const isPNG = file.type === 'image/png';
            // const isPG = (isJPG || isPNG)
            const isLt2M = file.size / 1024 / 1024 < 8;

            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },




    }
}
</script>

<style lang="scss">
.mod-menu {
    .menu-list__input,
    .icon-list__input {
        > .el-input__inner {
            cursor: pointer;
        }
    }
    &__icon-popover {
        width: 458px;
        overflow: hidden;
    }
    &__icon-inner {
        width: 478px;
        max-height: 258px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    &__icon-list {
        width: 458px;
        padding: 0;
        margin: -8px 0 0 -8px;
        > .el-button {
            padding: 8px;
            margin: 8px 0 0 8px;
            > span {
                display: inline-block;
                vertical-align: middle;
                width: 18px;
                height: 18px;
                font-size: 18px;
            }
        }
    }
    .icon-list__tips {
        font-size: 18px;
        text-align: center;
        color: #e6a23c;
        cursor: pointer;
    }
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}
.avatar {
    width: 120px;
    height: 120px;
    display: block;
}
</style>
